<template>
     <div id="app">
        <header class="app-header">
            <nav class="navbar">
                <div class="logo-container">
                    <img src="./assets/driving-school-logo.png" alt="驾校Logo" class="navbar-logo">
                    <div class="logo-text">龙王驾校管理系统</div>
                </div>

                <div class="navbar-right" v-if="showNavigation">
                  <!-- 教练导航栏 -->
                  <div v-if="userRole === 'COACH'">
                    <C_Navigationbar></C_Navigationbar>
                  </div>
                  <!-- 学员导航栏 -->
                  <div v-else-if="userRole === 'STUDENT'">
                    <S_C_Navigationbar></S_C_Navigationbar>
                  </div>

                  <!-- 退出登录按钮 -->
                  <div class="logout-container">
                    <el-button type="text" @click="logout">退出登录</el-button>
                  </div>
                </div>
            </nav>
        </header>

        <!-- 条件渲染 AdminLayout，仅在管理员页面显示 -->
        <router-view></router-view>

        <footer class="app-footer">
            <p>© 2025 龙王驾校管理系统 | 版权所有</p>
        </footer>
    </div>
</template>

<script setup>
import S_C_Navigationbar from "@/components/S_C_Navigationbar.vue";
import {useRoute, useRouter} from 'vue-router'
import { computed, ref } from "vue";
import CoachDashboard from "@/components/CoachDashboard.vue";
import C_Navigationbar from "@/components/C_Navigationbar.vue";

const route = useRoute()

// 计算属性：判断是否显示导航栏
const showNavigation = computed(() => {
    return route.path !== '/login'
})

const userRole = computed(() => {
  const userrole = localStorage.getItem('role')
  if (userrole) {
    return userrole
  }
  return null
})

// 添加路由实例
const router = useRouter()

// 退出登录方法
const logout = () => {
  // 清空本地存储
  localStorage.removeItem('access_token')
  localStorage.removeItem('role')
  localStorage.removeItem('user_id')
  localStorage.removeItem('user_name')

  // 重定向到登录页
  router.push('/login')
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333;
    margin: 0;
    padding: 0;
}

.app-header {
    background-color: #ffffff;
    color: #333;
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #eaeaea;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #42b983;
}

.navbar-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 3%;
}

.logout-container {
    margin-left: 20px;
}

.app-main {
    min-height: calc(100vh - 100px);
    background-color: #f9f9f9;
}

.app-footer {
    background-color: #ffffff;
    color: #666;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
    border-top: 1px solid #eaeaea;
}

:root {
    --primary-color: #42b983;
    --secondary-color: #409eff;
    --accent-color: #f39c12;
    --background-color: #f9f9f9;
    --text-color: #333;
    --header-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --menu-active: #409eff;
    --menu-hover: #f5f7fa;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 16px;
}
</style>
